<template>
  <view class="adventure-container">
    <!-- 顶部状态栏 -->
    <view class="status-bar">
      <view class="player-info">
        <image class="player-avatar" :src="player.avatar" mode="aspectFill"></image>
        <view class="player-stats">
          <text class="player-name">{{player.name}}</text>
          <text class="player-level">Lv.{{player.level}}</text>
        </view>
      </view>
      <view class="resource-bar">
        <view class="resource-item" v-for="(value, key) in player.resources" :key="key">
          <image class="resource-icon" :src="getResourceIcon(key)" mode="aspectFit"></image>
          <text class="resource-value">{{value}}</text>
        </view>
      </view>
    </view>

    <!-- 地图区域 -->
    <scroll-view class="map-area" scroll-y>
      <view class="map-grid">
        <view 
          class="map-tile"
          v-for="(tile, index) in mapTiles"
          :key="index"
          :class="{ 'unlocked': tile.unlocked }"
          @click="exploreTile(tile)"
        >
          <image class="tile-image" :src="tile.image" mode="aspectFill"></image>
          <view class="tile-info">
            <text class="tile-name">{{tile.name}}</text>
            <text class="tile-level">推荐等级: {{tile.level}}</text>
          </view>
          <view class="tile-status" v-if="!tile.unlocked">
            <text class="lock-icon">🔒</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="action-bar">
      <view 
        class="action-item"
        v-for="action in actions"
        :key="action.id"
        @click="handleAction(action)"
      >
        <image class="action-icon" :src="action.icon" mode="aspectFit"></image>
        <text class="action-name">{{action.name}}</text>
      </view>
    </view>

    <!-- 探索结果弹窗 -->
    <uni-popup ref="explorePopup" type="center">
      <view class="explore-result">
        <view class="result-header">
          <text class="result-title">探索结果</text>
          <text class="close-btn" @click="closeExplorePopup">×</text>
        </view>
        <view class="result-content">
          <view class="result-items">
            <view 
              class="result-item"
              v-for="(item, index) in exploreResults"
              :key="index"
            >
              <image class="item-icon" :src="item.icon" mode="aspectFit"></image>
              <view class="item-info">
                <text class="item-name">{{item.name}}</text>
                <text class="item-amount">×{{item.amount}}</text>
              </view>
            </view>
          </view>
          <view class="result-exp" v-if="exploreExp">
            <text class="exp-label">获得经验</text>
            <text class="exp-value">+{{exploreExp}}</text>
          </view>
        </view>
        <button class="continue-btn" @click="closeExplorePopup">继续探索</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      player: {
        name: '勇者',
        level: 1,
        exp: 0,
        avatar: '/static/avatar/hero.png',
        resources: {
          gold: 1000,
          energy: 100,
          gem: 10
        }
      },
      mapTiles: [
        {
          id: 1,
          name: '新手村',
          level: 1,
          image: '/static/maps/village.png',
          unlocked: true
        },
        {
          id: 2,
          name: '森林',
          level: 3,
          image: '/static/maps/forest.png',
          unlocked: true
        },
        {
          id: 3,
          name: '洞穴',
          level: 5,
          image: '/static/maps/cave.png',
          unlocked: false
        },
        {
          id: 4,
          name: '遗迹',
          level: 8,
          image: '/static/maps/ruins.png',
          unlocked: false
        }
      ],
      actions: [
        {
          id: 'bag',
          name: '背包',
          icon: '/static/icons/bag.png'
        },
        {
          id: 'shop',
          name: '商店',
          icon: '/static/icons/shop.png'
        },
        {
          id: 'task',
          name: '任务',
          icon: '/static/icons/task.png'
        },
        {
          id: 'friend',
          name: '好友',
          icon: '/static/icons/friend.png'
        }
      ],
      exploreResults: [],
      exploreExp: 0
    }
  },
  methods: {
    getResourceIcon(type) {
      const icons = {
        gold: '/static/icons/gold.png',
        energy: '/static/icons/energy.png',
        gem: '/static/icons/gem.png'
      }
      return icons[type]
    },
    exploreTile(tile) {
      if (!tile.unlocked) {
        uni.showToast({
          title: '该区域尚未解锁',
          icon: 'none'
        })
        return
      }

      // 检查体力
      if (this.player.resources.energy < 10) {
        uni.showToast({
          title: '体力不足',
          icon: 'none'
        })
        return
      }

      // 消耗体力
      this.player.resources.energy -= 10

      // 生成探索结果
      this.exploreResults = this.generateExploreResults(tile)
      this.exploreExp = Math.floor(Math.random() * 10 + tile.level * 5)

      // 更新玩家经验
      this.addExp(this.exploreExp)

      // 显示结果弹窗
      this.$refs.explorePopup.open()
    },
    generateExploreResults(tile) {
      const results = []
      const itemCount = Math.floor(Math.random() * 3) + 1

      for (let i = 0; i < itemCount; i++) {
        results.push({
          name: this.getRandomItem(tile.level),
          amount: Math.floor(Math.random() * 3) + 1,
          icon: '/static/items/potion.png'
        })
      }

      // 必定获得金币
      results.push({
        name: '金币',
        amount: Math.floor(Math.random() * 50 + tile.level * 10),
        icon: '/static/icons/gold.png'
      })

      return results
    },
    getRandomItem(level) {
      const items = [
        '小型药水',
        '中型药水',
        '大型药水',
        '经验药水',
        '力量药水'
      ]
      return items[Math.floor(Math.random() * items.length)]
    },
    addExp(exp) {
      this.player.exp += exp
      // 检查是否升级
      const needExp = this.player.level * 100
      if (this.player.exp >= needExp) {
        this.player.level += 1
        this.player.exp -= needExp
        uni.showToast({
          title: '升级了！',
          icon: 'success'
        })
      }
    },
    handleAction(action) {
      switch (action.id) {
        case 'bag':
          uni.navigateTo({
            url: '/pages/adventure/bag'
          })
          break
        case 'shop':
          uni.navigateTo({
            url: '/pages/adventure/shop'
          })
          break
        case 'task':
          uni.navigateTo({
            url: '/pages/adventure/task'
          })
          break
        case 'friend':
          uni.navigateTo({
            url: '/pages/adventure/friend'
          })
          break
      }
    },
    closeExplorePopup() {
      this.$refs.explorePopup.close()
    }
  }
}
</script>

<style>
.adventure-container {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.status-bar {
  background: white;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.player-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.player-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.player-stats {
  flex: 1;
}

.player-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 6rpx;
}

.player-level {
  font-size: 24rpx;
  color: #666;
}

.resource-bar {
  display: flex;
  justify-content: space-around;
}

.resource-item {
  display: flex;
  align-items: center;
}

.resource-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.resource-value {
  font-size: 28rpx;
  color: #333;
}

.map-area {
  flex: 1;
  padding: 20rpx;
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.map-tile {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
}

.tile-image {
  width: 100%;
  height: 200rpx;
}

.tile-info {
  padding: 20rpx;
}

.tile-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 6rpx;
}

.tile-level {
  font-size: 24rpx;
  color: #666;
}

.tile-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lock-icon {
  font-size: 48rpx;
  color: white;
}

.action-bar {
  background: white;
  padding: 20rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.action-name {
  font-size: 24rpx;
  color: #666;
}

.explore-result {
  background: white;
  border-radius: 20rpx;
  width: 600rpx;
  padding: 30rpx;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.result-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  padding: 0 20rpx;
}

.result-items {
  margin-bottom: 30rpx;
}

.result-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.item-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-name {
  font-size: 28rpx;
  color: #333;
}

.item-amount {
  font-size: 28rpx;
  color: #666;
}

.result-exp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-top: 1rpx solid #eee;
}

.exp-label {
  font-size: 28rpx;
  color: #333;
}

.exp-value {
  font-size: 28rpx;
  color: #4caf50;
  font-weight: bold;
}

.continue-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #4caf50;
  color: white;
  border-radius: 40rpx;
  font-size: 32rpx;
  margin-top: 30rpx;
}
</style> 